import { JSX } from "preact/jsx-runtime";
export interface TimeLineItemProp {
  icon?: JSX.Element;
  tag?: string | JSX.Element;
  title?: string;
  time?: string;
  children?: JSX.Element | string;
  content?: string;
  actionProps?: JSX.HTMLAttributes<HTMLAnchorElement>;
}
/**
 * 随机标签
 */
export const randomBadgeStyle = [
  "bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300",
  "bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300",
  "bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300",
  "bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300",
  "bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300",
  "bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300",
  "bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300",
  "bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300",
];
/**
 * 随即操作按钮颜色
 */
export const randomActionColor = [
  "text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
  "text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
  "text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
  "text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
  "text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
  "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
  "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2",
];

function TimeLineItem(
  { title, tag, time, children, content, icon, actionProps }: TimeLineItemProp,
) {
  const actionClassIndex = Math.floor(Math.random() * randomActionColor.length);
  const { class: OC, className: CN, ...ops } = actionProps || {};
  const formatedClass = `${
    randomActionColor.at(actionClassIndex)
  } cursor-pointer ${OC ?? ""} ${CN ?? ""}`;
  return (
    <li class="mb-10 ms-6">
      {icon && (
        <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white dark:ring-[#2f2f2f] dark:bg-blue-900">
          {icon}
        </span>
      )}
      <h3 class="flex items-center mb-1 text-lg gap-4 font-semibold flex-wrap text-gray-900 dark:text-white">
        {title}
        {!!tag && (
          <span
            class={randomBadgeStyle.at(
              Math.floor(Math.random() * randomBadgeStyle.length),
            )}
          >
            {tag}
          </span>
        )}
      </h3>
      <time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
        {time}
      </time>
      {/* 主体内容部分 */}
      <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
        {content ?? children}
      </p>
      {/* 操作按钮部分 */}
      {ops.children && (
        <a
          class={formatedClass}
          {...ops}
        />
      )}
    </li>
  );
}
interface TimeLineProp extends JSX.HTMLAttributes<HTMLOListElement> {
  items: Array<TimeLineItemProp>;
}
export const Timeline = (props: TimeLineProp) => {
  const { className: classOrigon, class: className, items, ...ops } = props;
  const concatCalss = `relative border-s border-gray-200 dark:border-gray-700 ${
    classOrigon ?? ""
  } ${className ?? ""}`;
  return (
    <ol
      class={concatCalss}
      {...ops}
    >
      {items.map((props, index) => {
        return <TimeLineItem key={index} {...props} />;
      })}
    </ol>
  );
};

export const CredentialExpiration = () => {
  return <main>链接已过期,或访问链接设备超过4台</main>;
};
